<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_terrainCutFillCalculation"></title>
    <style>
      .ol-popup {
          position: absolute;
          background-color: white;
          -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
          padding: 15px;
          border-radius: 10px;
          border: 1px solid #cccccc;
          bottom: 12px;
          left: -50px;
          min-width: 280px;
      }

      .ol-popup:after, .ol-popup:before {
          top: 100%;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
      }

      .ol-popup:after {
          border-top-color: white;
          border-width: 10px;
          left: 48px;
          margin-left: -10px;
      }

      .ol-popup:before {
          border-top-color: #cccccc;
          border-width: 11px;
          left: 48px;
          margin-left: -11px;
      }
      .ol-popup-closer {
          text-decoration: none;
          position: absolute;
          top: 2px;
          right: 8px;
        }

      .ol-popup-closer:after {
          content: "✖";
      }
      #toolbar {
          position: absolute;
          top: 50px;
          right: 10px;
          text-align: center;
          z-index: 100;
          border-radius: 4px;
      }
  </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>
<div id="toolbar" class="panel panel-primary">
  <div class='panel-heading'>
      <h5 class='panel-title text-center' data-i18n="resources.text_terrainCutFillCalculation"></h5></div>
  <div class='panel-body content'>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_terrainCutFillCalculation"
              onclick="terrainCutFillCalculationProcess()"/>&nbsp;
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_clearLayer"
              onclick="removeTheme()"/>
  </div>
</div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
<script type="text/javascript">
    var map, options, terrainCutFillCalculationResult, themeLayer,
        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-jingjin/rest/maps/京津地区地图",
        serviceUrl = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
    var extent = [104.07, 30.54, 119.51, 42.31];
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');
    var overlay = new ol.Overlay(({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    }));
    closer.onclick = closeOverlay;
    new ol.supermap.MapService(baseUrl).getMapInfo().then(function (serviceResult) {
        var mapJSONObj = serviceResult.result;
        map = new ol.Map({
            target: 'map',
            // ol v7版本用法为ol.control.defaults.defaults； v6版本以下用法为ol.control.defaults
            controls: ol.control.defaults.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [116.55, 39.79],
                zoom: 8,
                projection: "EPSG:4326",
                multiWorld: true
            }),
            overlays: [overlay]
        });
        options = ol.source.TileSuperMapRest.optionsFromMapJSON(baseUrl, mapJSONObj);
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest(options)
        });
        map.addLayer(layer);
    });

    function terrainCutFillCalculationProcess() {
        removeTheme();
        var terrainCutFillCalculationParameters = new ol.supermap.TerrainCutFillCalculationParameters({
            dataset: "JingjinTerrain@Jingjin",
            cutFillType:"REGION3D",
            region3D: new ol.supermap.Geometry3D({
              points:[{"x":116.2,"y":40.1,"z":-5.0},{"x":116.5,"y":40.5,"z":0.0},{"x":116.5,"y":40.1,"z":30.0},{"x":116.2,"y":40.1,"z":-5.0}],
              rotationX: 0.0,
              rotationY: 0.0,
              rotationZ: 0.0,
              scaleX: 0.0,
              scaleY: 0.0,
              scaleZ: 0.0,
              type: "REGION3D",
            }),
            resultDataset:"cutfill", 
            buildPyramid:true,
            deleteExistResultDataset:true

        });
        new ol.supermap.SpatialAnalystService(serviceUrl).terrainCutFillCalculate(terrainCutFillCalculationParameters).then(function (serviceResult) {
            terrainCutFillCalculationResult = serviceResult.result;
            //用栅格专题图展示分析结果
            showAnalysisResult_ThemeGridRange();
            var innerHTML = resources.text_cutArea + terrainCutFillCalculationResult.cutArea + "<br/>";
            innerHTML += resources.text_cutVolume  + terrainCutFillCalculationResult.cutVolume + "<br/>";
            innerHTML += resources.text_fillArea  + terrainCutFillCalculationResult.fillArea + "<br/>";
            innerHTML += resources.text_fillVolume  + terrainCutFillCalculationResult.fillVolume + "<br/>";
            innerHTML += resources.text_remainderArea  + terrainCutFillCalculationResult.remainderArea;
            content.innerHTML = innerHTML;
            overlay.setPosition([116.5, 40.5]);
        });

          //构造栅格专题图
        function showAnalysisResult_ThemeGridRange() {
            var themeGridRangeIteme1 = new ol.supermap.ThemeGridRangeItem({
                    start: 0,
                    end: 100,
                    color: new ol.supermap.ServerColor(0, 255, 255)
                }),
                themeGridRangeIteme2 = new ol.supermap.ThemeGridRangeItem({
                    start: 100,
                    end: 500,
                    color: new ol.supermap.ServerColor(0, 125, 125)
                }),
                themeGridRangeIteme3 = new ol.supermap.ThemeGridRangeItem({
                    start: 500,
                    end: 1000,
                    color: new ol.supermap.ServerColor(0, 125, 0)
                }),
                themeGridRangeIteme4 = new ol.supermap.ThemeGridRangeItem({
                    start: 1000,
                    end: 99999999999,
                    color: new ol.supermap.ServerColor(0, 255, 0)
                });

            var themeGridRange = new ol.supermap.ThemeGridRange({
                reverseColor: false,
                rangeMode: ol.supermap.RangeMode.EQUALINTERVAL,
                //栅格分段专题图子项数组
                items: [
                    themeGridRangeIteme1,
                    themeGridRangeIteme2,
                    themeGridRangeIteme3,
                    themeGridRangeIteme4
                ]
            });

            var themeParameters = new ol.supermap.ThemeParameters({
                //制作专题图的数据集（填挖方计算的结果数据集）
                datasetNames: [terrainCutFillCalculationResult.dataset.split('@')[0]],
                dataSourceNames: ["Jingjin"],
                joinItems: null,
                themes: [themeGridRange]
            });

            new ol.supermap.ThemeService(baseUrl).getThemeInfo(themeParameters).then(function (serviceResult) {
                var result = serviceResult.result;
                if (result && result.newResourceID) {
                    themeLayer = new ol.layer.Tile({
                        source: new ol.source.TileSuperMapRest({
                            url: baseUrl,
                            noWrap: true,
                            cacheEnabled: false,
                            transparent: true,
                            layersID: result.newResourceID,
                            tileGrid: new ol.tilegrid.TileGrid({
                                extent: extent,
                                resolutions: options.tileGrid.getResolutions()
                            }),
                            transparent: true
                        })
                    });
                    map.addLayer(themeLayer);
                }
            });
        }
    }

    //移除专题图
    function removeTheme() {
      if (map.getLayers().getLength() > 1) {
          map.removeLayer(themeLayer);
          closeOverlay();
      }
    }
    //关闭弹窗
    function closeOverlay() {
      overlay.setPosition(undefined);
      closer.blur();
      return false
    };
</script>
</body>
</html>